<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <div class="handle-box flex flex-center">
                <el-button type="primary" icon="el-icon-folder" @click="submitForm('ruleForm')">保存</el-button>
            </div>

            <div class="table-form-box">
                <h3 class="h3">客户联系记录</h3>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <table border="0" width="100%" cellpadding="0" cellspacing="1">
                        <colgroup>
                            <col width="15%"/>
                            <col width="35%"/>
                            <col width="15%"/>
                            <col width="35%"/>
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="8">基本信息</td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <span class="color-ff2200">*</span>客户名称:
                                </td>
                                <td>
                                    <el-form-item prop="name">
                                        <div @click="showCustomerDialog('客户')">
                                            <el-input
                                                placeholder="请输入"
                                                v-model="ruleForm.name"
                                                size="small"
                                                readonly
                                            >
                                                <i slot="suffix" class="el-icon-search"></i>
                                            </el-input>
                                        </div>
                                    </el-form-item>
                                </td>
                                <td align="right">责任人:</td>
                                <td>
                                    <el-form-item prop="dutyUserName">
                                        <el-input
                                            placeholder="请输入"
                                            v-model="ruleForm.dutyUserName"
                                            size="small"
                                            disabled
                                        >
                                        </el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right"><span class="color-ff2200">*</span>销售阶段:</td>
                                <td>
                                    <el-form-item prop="stageName">
                                         <el-select
                                            v-model="ruleForm.stageName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'阶段')"
                                        >
                                            <el-option
                                                v-for="(item, index) in stageList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">预计成交日期:</td>
                                <td>
                                    <el-form-item prop="expectedDealDate">
                                        <el-date-picker
                                            style="width:99%"
                                            v-model="ruleForm.expectedDealDate"
                                            align="right"
                                            type="datetime"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    预计成交金额:
                                </td>
                                <td>
                                    <el-form-item prop="expectedDealMoney">
                                        <el-input
                                            v-model="ruleForm.expectedDealMoney"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                                <td align="right"><span class="color-ff2200">*</span>可能性:</td>
                                <td>
                                    <el-form-item prop="possibilityPercent">
                                        <el-select
                                            v-model="ruleForm.possibilityPercent"
                                            placeholder="请选择"
                                        >
                                            <el-option
                                                v-for="(item, index) in possibilityList"
                                                :key="index"
                                                :label="item.itemValue"
                                                :value="item.itemValue"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                               
                            </tr>
                            <tr>
                                <td align="right"><span class="color-ff2200">*</span>意向产品:</td>
                                <td>
                                    <el-form-item prop="intentProductsName">
                                         <el-select
                                            v-model="ruleForm.intentProductsName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'意向产品')"
                                        >
                                            <el-option
                                                v-for="(item, index) in intentProductsList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                   
                                </td>
                                <td align="right">
                                   客户方联系人:
                                </td>
                                <td>
                                    <el-form-item prop="linkUser">
                                        <el-input
                                            v-model="ruleForm.linkUser"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right"><span class="color-ff2200">*</span>机会状态:</td>
                                <td>
                                    <el-form-item prop="intentStatusName">
                                         <el-select
                                            v-model="ruleForm.intentStatusName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'机会状态')"
                                        >
                                            <el-option
                                                v-for="(item, index) in intentStatusList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">联系时间:</td>
                                <td>
                                    <el-form-item prop="linkTime">
                                         <el-date-picker
                                            style="width:99%"
                                            v-model="ruleForm.linkTime"
                                            align="right"
                                            type="datetime"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right"><span class="color-ff2200">*</span> 联系方式:</td>
                                <td>
                                    <el-form-item prop="linkTypeName">
                                        <el-select
                                            v-model="ruleForm.linkTypeName"
                                            placeholder="请选择"
                                            @change="handleValue($event,'联系方式')"
                                        >
                                            <el-option
                                                v-for="(item, index) in linkTypeList"
                                                :key="index"
                                                :label="item.itemName"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </td>
                                <td align="right">联系详情:</td>
                                <td >
                                    <el-form-item prop="linkDescription">
                                        <el-input v-model="ruleForm.linkDescription" type="textarea"></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">下次联系时间:</td>
                                <td>
                                    <el-form-item prop="nextLinkTime">
                                         <el-date-picker
                                            style="width:99%"
                                            v-model="ruleForm.nextLinkTime"
                                            align="right"
                                            type="datetime"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </td>
                                <td align="right">
                                   下次联系目标:
                                </td>
                                <td>
                                    <el-form-item prop="nextLinkTarget">
                                        <el-input
                                            v-model="ruleForm.nextLinkTarget"
                                            size="small"
                                        ></el-input>
                                    </el-form-item>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-form>
            </div>

            <!-- 上传附件 -->
            <upload-files :files="fileList" @fun="dealFiles" v-if="flag"></upload-files>
        </div>
        <!-- 用户树搜索 -->
        <tree-search
            :isShow="showSearch"
            :dialogTitle="searchDialogTit"
            @edit="searchBack"
            @close="closeDialog"
        ></tree-search>
        <customer-search
            :isShow="showCustomerSearch"
            :dialogTitle="customerSearchDialogTit"
            method="clientInfoFindAllPageByDTO"
            @edit="customerSearchBack"
            @close="closeDialog"
        ></customer-search>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
import bus from '../../../components/common/bus'
export default {
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            searchDialogTit: '',
            showSearch: false,
            ruleForm: {
                clientId: '', // 往来单位的Id	
                dutyUserId: '', // 责任人id  客户信息回显	
                dutyUserName: '', // 责任人  客户信息回显	
                expectedDealDate: '', // 预计成交日期	
                expectedDealMoney: '', // 预计成交金额	
                id: '', // 主键	
                intentProductsId: '', // 意向产品id
                intentProductsName: '', // 意向产品名称 字典数据	
                intentStatusId: '', // 机会状态id   字典数据	
                intentStatusName: '', // 机会状态名称   字典数据	
                linkDescription: '', // 联系说明	
                linkTime: '', // 联系时间	
                linkTypeId: '', // 联系方式id  字典数据	
                linkTypeName: '', // 联系方式名称  字典数据	
                linkTypeValue: '', // 联系方式值  字典数据	
                linkUser: '', // 客户方联系人	
                name: '', // 客户名称	
                nextLinkTarget: '', // 下次联系的目标	
                nextLinkTime: '', // 下次联系时间	
                possibilityPercent: '', // 可能性百分比  写死的下拉框	
                stageId: '', // 阶段id	
                stageName: '', // 阶段名称	
                uploadReturns: []
            },
            rules: {
                name: [{ required: true, message: '请选择客户', trigger: 'change' }],
                stageName: [{ required: true, message: '请选择阶段', trigger: 'change' }],  
                possibilityPercent: [{ required: true, message: '请选择可能性', trigger: 'change' }], 
                intentProductsName: [{ required: true, message: '请选择意向产品', trigger: 'change' }], 
                intentStatusName: [{ required: true, message: '请选择机会状态', trigger: 'change' }],
                linkTypeName: [{ required: true, message: '请选择联系方式', trigger: 'change' }],
                expectedDealMoney: [{message: '请输入正确的余额', type: 'number',transform (value) {
                    return _.toNumber(value)
                }, trigger: 'blur'}]
            },
            fileList: [],
            isUpdate: false, //是否是更新
            flag: false,
            customerSearchDialogTit: '',
            showCustomerSearch: false,
            
            // 下拉；列表
            stageList: [], // 阶段
            intentProductsList: [], // 意向产品
            intentStatusList: [], // 机会状态
            linkTypeList: [], // 联系方式
            possibilityList: [ // 可能性
                { itemValue: '10%'},
                { itemValue: '20%'},
                { itemValue: '30%'},
                { itemValue: '40%'},
                { itemValue: '50%'},
                { itemValue: '60%'},
                { itemValue: '70%'},
                { itemValue: '80%'},
                { itemValue: '90%'},
                { itemValue: '100%'},
            ]
        };
    },
    methods: {
        // 选择姓名
        showTreeDialog(tit) {
            this.searchDialogTit = tit;
            this.showSearch = true;
        },
        // 责任人搜索结果返回
        searchBack(data) {
            console.log(data.backData, 'searchTreeBack');
            this.ruleForm.dutyUserName = data.backData.name;
            this.ruleForm.dutyUserId = data.backData.id;
            // this.ruleForm.dutyDepartId = data.backData.organizationId // 部门
            // this.ruleForm.dutyDepartName = data.backData.organizationName
            
            this.showSearch = false;
        },
        // 选择姓名
        showCustomerDialog(tit) {
            this.customerSearchDialogTit = tit;
            this.showCustomerSearch = true;
        },
        // 客户搜索结果返回
        customerSearchBack(data) {
            console.log(data.backData, 'customerSearchBack');
            this.ruleForm.name = data.backData.name;
            this.ruleForm.clientId = data.backData.id;
            // this.ruleForm.clientTypeld = data.backData.clientTypeId; // 类型
            // this.ruleForm.clientTypeName = data.backData.clientTypeName; 
            // this.ruleForm.clientTypeValue = data.backData.clientTypeValue;
            // this.ruleForm.industryId = data.backData.industryId; // 行业
            // this.ruleForm.industryName = data.backData.industryName; 
            // this.ruleForm.industryValue = data.backData.industryValue;
            // this.ruleForm.phone = data.backData.phone
            // this.ruleForm.telphone = data.backData.telphone
            // this.ruleForm.regionName = data.backData.regionName // 区域
            // this.ruleForm.regionId = data.backData.regionId
            this.ruleForm.dutyUserName = data.backData.repName;// 责任人
            this.ruleForm.dutyUserId = data.backData.repId;
            this.showCustomerSearch = false;
        },
        closeDialog (data) {
            this.showSearch = data.showDialog;
            this.showCustomerSearch = false
        },
        //新增
        customerLinkInfoInset() {
            let sendData = _.cloneDeep(this.ruleForm);
            sendData.expectedDealMoney = sendData.expectedDealMoney !='' ? sendData.expectedDealMoney : 0
            appMain
                .customerLinkInfoInset(sendData)
                .then(res => {
                    if (res.data.code === 20000) {
                        bus.$emit('close_current_tags')
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 更新
        customerLinkInfoUpdateById() {
            let sendData = _.cloneDeep(this.ruleForm);
            sendData.expectedDealMoney = sendData.expectedDealMoney !='' ? sendData.expectedDealMoney : 0
            appMain
                .customerLinkInfoUpdateById(sendData)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$message.success(res.data.message);
                        bus.$emit('close_current_tags')
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        customerLinkInfoFindById(id) {
            appMain
                .customerLinkInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.ruleForm = res.data.data;
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //根据id查询附件
        uploadFileInfoFindById(id) {
            appMain
                .uploadFileInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.fileList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                    this.flag = true;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.ruleForm.uploadReturns = this.fileList;
                    //alert('submit!');
                    if (!this.isUpdate) {
                        //添加文件列表
                        //新增
                        this.customerLinkInfoInset();
                    } else {
                        //添加文件列表
                        //更新
                        this.customerLinkInfoUpdateById();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 上传文件返回
        dealFiles(data) {
            this.fileList = data.backData;
            this.ruleForm.uploadReturns = this.fileList;
        },
        /**
         * 下拉框数据start
         */
        dictItemForPerfection () {
            let dictTypes =['阶段', '意向产品', '机会状态', '联系方式'];
            dictTypes.map( item => {
                appMain.dictItem({ typeName: item }).then(res => {
                    if (res.data.code === 20000) {
                        if (item == '阶段') {
                            this.stageList = res.data.data;
                        } else if (item == '意向产品') {
                            this.intentProductsList = res.data.data;
                        } else if (item == '机会状态') {
                            this.intentStatusList = res.data.data;
                        } else if (item == '联系方式') {
                            this.linkTypeList = res.data.data;
                        }
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            })
        },
        //下拉框选取值
        handleValue(e, dict) {
            console.log(e, dict, '下拉框选取值');
            if (dict == '阶段') {
                let item = this.selectChooseItem(this.stageList, e);
                this.ruleForm.clientTypeId = item.id;
                this.ruleForm.clientTypeName = item.itemName;
            } else if (dict == '意向产品') {
                let item = this.selectChooseItem(this.intentProductsList, e);
                this.ruleForm.industryId = item.id;
                this.ruleForm.industryName = item.itemName;
            } else if (dict == '机会状态') {
                let item = this.selectChooseItem(this.intentStatusList, e);
                this.ruleForm.scaleId = item.id;
                this.ruleForm.scaleName = item.itemName;
            } else if (dict == '联系方式') {
                let item = this.selectChooseItem(this.linkTypeList, e);
                this.ruleForm.linkTypeId = item.id;
                this.ruleForm.linkTypeName = item.itemName;
                this.ruleForm.linkTypeValue = item.itemValue;
            }
        },
        // 通用字典选择
        selectChooseItem(item, id) {
            for (const key in item) {
                if (item[key].id == id) {
                    return item[key];
                }
            }
        },
        /**
         * 下拉框数据end
         */
    },

    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
        this.dictItemForPerfection();
    },
    created() {
        //如果有id过来就是修改的
        if (this.$route.query.id) {
            let id = this.$route.query.id;
            //是更新操作
            this.isUpdate = true;
            //通过id查询对应离职信息
            this.customerLinkInfoFindById(id);
            //通过id查询附件信息
            this.uploadFileInfoFindById(id);
        } else {
            //新增操作
            this.isUpdate = false;
            this.flag = true;
        }
    }
};
</script>

<style  scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    padding: 5px 50px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}

.table-form-box table {
    background-color: #666;
}
.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}
.table-form-box table .tr-title td {
    font-size: 14px;
    line-height: 40px;
}
.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 4px;
    min-height: 40px;
    font-size: 12px;
}
.color-ff2200 {
    color: #ff2200;
}
</style>